<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-06-22
 * Time: 09:31
 */
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>公司账</title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
</head>

<body id="app">

<?=Html::cssFile('@web/static/css/index.css')?>
<?php echo $this->render('../public/ele.php')?>
<!--引入页面头部-->
<?php echo $this->render('../public/header.php')?>
<!--引入账本样式-->
<?=Html::cssFile('@web/static/css/tally.css')?>
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>
<?=Html::jsFile('@web/static/js/highcharts.js')?>
<?=Html::jsFile('@web/static/js/tally-charts.js')?>
<?=Html::jsFile('@web/static/js/china-area-data.js?v=1')?>

<!--引入账户组件-->
<?php echo $this->render('component/account.php')?>
<!--引入分类组件-->
<?php echo $this->render('component/category.php')?>
<!--引入商家组件-->
<?php echo $this->render('component/store.php')?>
<!--引入项目组件-->
<?php echo $this->render('component/project.php')?>
<!--引入成员组件-->
<?php echo $this->render('component/member.php')?>
<!--引入设置组件-->
<?php echo $this->render('component/setting.php')?>

<div id="mainContent" style="display: none;" :style="{display: 'block'}">
    <el-row>
        <el-col :span="3">
            <div class="tallyAdd">
               账本列表
            </div>
            <el-scrollbar>
                <div id="tallyList">
                    <div v-for="(item, index) in tallyList">
                        <el-card shadow="hover" class="tallyItemWrap" v-bind:class="{'active':item.id == currentTallyId}">
                            <div class="tallyItem" data-id="{{ item.id }}"  @click="location.href='/tally?id='+item.id">
                                <el-tooltip placement="right">
                                    <div slot="content">{{ item.company_title }}
                                        <br/>{{ item.city }}.{{ item.province }}
                                        <br/>{{ item.memo }}
                                    </div>
                                    <p class="tallyTitle">
                                        {{ item.title }}
                                    </p>
                                </el-tooltip>
                                <el-tag class="tallyItemTag" size="mini" type="success">{{ item.role_name }}</el-tag>
                            </div>
                        </el-card>
                    </div>
					<div>
                        <el-card shadow="hover" class="tallyItemWrap">
                            <div class="tallyItem" data-id="{{ item.id }}"  v-on:click="tallyAddDialog">
							<p class="el-tooltip tallyTitle" aria-describedby="el-tooltip-9669" tabindex="0">
                             <i class="el-icon-plus"></i> 新增账本
                            </p>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-scrollbar>
        </el-col>
        <el-col :span="21">
            <el-tabs type="border-card" v-model="activeTab" class="tallyNavItem" @tab-click="handleTabClick">
                <el-tab-pane name="record">
                    <span slot="label"><i class="el-icon-edit"></i> 记一笔</span>
                    <div id="tallyRecordBox">
                        <div id="operationArea" style="text-align:center">
                            <el-row>
							<el-button-group justify="center">
                                <el-button icon="el-icon-plus" v-if="tallyAddType == 10" type="primary" size="medium">记收入</el-button>
                                <el-button icon="el-icon-plus" v-if="tallyAddType != 10" type="default" size="medium" @click="setTallyAddType(10)">记收入</el-button>
                                <el-button icon="el-icon-minus" v-if="tallyAddType == 20" type="primary" size="medium">记支出</el-button>
                                <el-button icon="el-icon-minus" v-if="tallyAddType != 20" type="default" size="medium" @click="setTallyAddType(20)">记支出</el-button>
                                <el-button icon="el-icon-refresh" v-if="tallyAddType == 30" type="primary" size="medium">记转账</el-button>
                                <el-button icon="el-icon-refresh" v-if="tallyAddType != 30" type="default" size="medium" @click="setTallyAddType(30)">记转账</el-button>
                            </el-button-group>
							</el-row>
                        </div>
                        <div class="tallyRecordForm">
                            <el-row>
								<el-col :span="24">
									<el-form :inline="true" :model="tallyRecordForm" :rules="tallyFormRules" class="form-inline recordForm">
									<el-col :span="20">
										<el-col :span="24">
										<el-form-item label="金额" prop="amount">
                                            <el-input placeholder="0.00" v-model="tallyRecordForm.amount"> <template slot="append">元</template></el-input>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
										<el-form-item prop="account_id">
                                            <span slot="label">{{ tallyAddType == 30 ? "转出":"账户" }}</span>
                                            <el-select placeholder="账户" clearable filterable default-first-option v-model="tallyRecordForm.account_id" @click.native="getAccountList()">
                                                <el-option
                                                        v-for="item in accountList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item prop="account_dst_id" v-if="tallyAddType == 30">
                                            <span slot="label">转入</span>
                                            <el-select placeholder="转入账户" clearable filterable default-first-option v-model="tallyRecordForm.account_dst_id">
                                                <el-option
                                                        v-for="item in accountList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item v-if="tallyAddType == 10 || tallyAddType == 20" label="分类">
                                            <el-select  placeholder="分类" clearable filterable default-first-option v-model="tallyRecordForm.category_id" filterable @click.native="getCategoryList()">
                                                <el-option-group
                                                    v-for="cate in categoryList"
                                                    :key="cate.title"
                                                    :label="cate.title">
                                                    <el-option
                                                            v-for="item in cate.children"
                                                            :key="item.id"
                                                            :label="item.title"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-option-group>
                                            </el-select>
                                        </el-form-item>
                                        </el-col>
										<el-col :span="8">

                                        <el-form-item v-if="tallyAddType == 10" label="客户">
                                            <el-select  placeholder="客户" clearable filterable default-first-option v-model="tallyRecordForm.store_id" @click.native="getStoreList(1)">
                                                <el-option
                                                        v-for="item in storeList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item v-if="tallyAddType == 20" label="供应商">
                                            <el-select  placeholder="供应商" clearable filterable default-first-option v-model="tallyRecordForm.store_id" @click.native="getStoreList(2)">
                                                <el-option
                                                        v-for="item in storeList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item label="员工">
                                            <el-select  placeholder="员工" clearable filterable default-first-option v-model="tallyRecordForm.member_id" @click.native="getMemberList()">
                                                <el-option
                                                        v-for="item in memberList"
                                                        :key="item.id"
                                                        :label="item.name"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item label="项目">
                                            <el-select  placeholder="项目" clearable filterable default-first-option v-model="tallyRecordForm.project_id"  @click.native="getProjectList()">
                                                <el-option
                                                        v-for="item in projectList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
										</el-col>
										<el-col :span="8">
                                        <el-form-item label="时间">
                                            <el-date-picker class="datePicker" v-model="tallyRecordForm.dateR" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                                            
                                            <!--<el-time-picker class="timePicker" v-model="tallyRecordForm.timeR" placeholder="选择时间" value-format="HH:mm:ss"></el-time-picker>-->
                                        </el-form-item>
                                        </el-col>
										<el-col :span="16">
                                            <el-form-item label="备注">
                                                <el-input placeholder="备注" class="tallyMemoInput" v-model="tallyRecordForm.memo"></el-input>
                                            </el-form-item>
                                        </el-col>    
                                        <el-col :span="24">
										<p style="text-align:center;margin-bottom: 20px;">
										<el-button type="success" @click="handleRecordForm"><i class="el-icon-upload"></i> 保 存</el-button>
										</p>
										</el-col>
									</el-col>
									<el-col :span="4">
										<p style="margin-bottom: 10px;">
                                            <el-link :underline="false" type="info"  @click="showImgUploadBox = !showImgUploadBox"><i class="el-icon-paperclip"></i>&nbsp;添加图片或附件 <i class="el-icon-arrow-down"></i></el-link>
                                            <el-upload v-if="showImgUploadBox" accept="image/jpeg,image/gif,image/png,application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                                       action="/api/upload/file" :headers="upHeaders"
                                                       :before-upload="recordFormFileBeforeUpload"
                                                       :file-list="recordFormFileList"
                                                       :on-success="recordFormFileUploadSuccess"
                                                       :on-remove="recordFormFileRemove"
                                                    list-type="picture-card" :limit="3">
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                                <img width="100%" :src="dialogImageUrl" alt="">
                                            </el-dialog>
                                        </p>
									</el-col>
									</el-form>
								</el-col>
                            </el-row>
                            <div class="recordListBox">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>账目清单 </span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span> 最近10条 </span>
                                    </div>
                                    <!--账单列表 最近10条-->
                                    <div class="recordTable">
                                        <template>
                                            <el-table :data="recordListRecent" border stripe>
                                                <el-table-column type="index">
                                                </el-table-column>
                                                <el-table-column prop="tally_time" sortable width="120px" label="账单日期">
                                                    <template slot-scope="scope">
                                                        <i class="el-icon-time"></i>
                                                        <span>{{ scope.row.tally_time.substring(0,10) }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="category_name" label="分类"></el-table-column>
                                                <el-table-column prop="type_txt" label="类型"></el-table-column>
                                                <el-table-column prop="amount" sortable label="金额"></el-table-column>
                                                <el-table-column prop="account_name" label="账户"></el-table-column>
                                                <el-table-column prop="store_name" width="100px" label="客户/供应商"></el-table-column>
                                                <el-table-column prop="project_name" label="项目"></el-table-column>
                                                <el-table-column prop="member_name" label="员工"></el-table-column>
                                                <el-table-column prop="memo" label="备注"></el-table-column>
                                                <el-table-column prop="state_txt" label="状态"></el-table-column>
                                                <el-table-column prop="state_txt" label="审核">
                                                    <template slot-scope="scope">
                                                        <div v-if="scope.row.state==0 && currentTally.role!='accountant'" >
                                                             <span class="recordOptBtn primary" @click="auditRecord(scope.row,1)">
                                                            <i class="el-icon-check"></i>&nbsp;</span>
                                                            <span class="recordOptBtn primary" @click="auditRecord(scope.row,-1)">
                                                            <i class="el-icon-close"></i>&nbsp;
                                                        </span>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column fixed="right" label="操作" width="100px">
                                                    <template slot-scope="scope">
                                                        <span class="recordOptBtn primary" @click="editRecord(scope.row)">
                                                            <i class="el-icon-edit"></i>&nbsp;
                                                        </span>
                                                        <span  v-if="currentTally.role!='accountant'" class="recordOptBtn danger" @click="delRecord(scope.$index,recordListRecent)">
                                                            <i class="el-icon-delete-solid"></i>&nbsp;
                                                        </span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </template>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="lists">
                    <span slot="label"><i class="el-icon-s-order"></i> 流水</span>
                    <div id="tallyRecordBox">
                        <div class="tallyRecordForm">
                            <div class="recordListBox">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>账目清单</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{ recordPeriod }}</span>
                                        <div class="recordStatRight">
                                            总支出：
                                            <span class="green number" id="ft-payout">-{{ recordCountDebt.out }}</span>
                                            <el-divider direction="vertical"></el-divider>
                                            总收入：
                                            <span class="orange number" id="ft-payout">{{ recordCountDebt.in }}</span>
                                            <el-divider direction="vertical"></el-divider>
                                            结余：
                                            <span class="gray number" id="ft-payout">{{ recordCountDebt.debt }}</span>
                                        </div>
                                    </div>
                                    <!--条件筛选账单表单-->
                                    <div class="recordSearchBox">
                                        <el-form :inline="true" v-model="recordSearchForm" class="form-inline recordSearchForm">
                                            <el-form-item size="mini">
                                                <el-select placeholder="全部类型" clearable filterable default-first-option v-model="recordSearchForm.type" filterable>
                                                    <el-option
                                                            v-for="item in tallyTypes"
                                                            :key="item.id"
                                                            :label="item.title"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-select placeholder="全部分类" clearable filterable default-first-option v-model="recordSearchForm.category_id" filterable @click.native="getCategoryList('forRecord')">
                                                    <el-option-group
                                                            v-for="cate in categoryList"
                                                            :key="cate.title"
                                                            :label="cate.title">
                                                        <el-option
                                                                v-for="item in cate.children"
                                                                :key="item.id"
                                                                :label="item.title"
                                                                :value="item.id">
                                                        </el-option>
                                                    </el-option-group>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-select placeholder="全部账户" clearable filterable default-first-option v-model="recordSearchForm.account_id" @click.native="getAccountList()">
                                                    <el-option
                                                            v-for="item in accountList"
                                                            :key="item.id"
                                                            :label="item.title"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-select placeholder="客户/供应商" clearable filterable default-first-option v-model="recordSearchForm.store_id" @click.native="getStoreListAll()">
                                                    <el-option-group
                                                            v-for="cate in storeListAll"
                                                            :key="cate.title"
                                                            :label="cate.title">
                                                        <el-option
                                                                v-for="item in cate.children"
                                                                :key="item.id"
                                                                :label="item.title"
                                                                :value="item.id">
                                                        </el-option>
                                                    </el-option-group>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-select  placeholder="项目" clearable filterable default-first-option v-model="recordSearchForm.project_id"  @click.native="getProjectList()">
                                                    <el-option
                                                            v-for="item in projectList"
                                                            :key="item.id"
                                                            :label="item.title"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-select  placeholder="员工" clearable filterable default-first-option v-model="recordSearchForm.member_id" @click.native="getMemberList()">
                                                    <el-option
                                                            v-for="item in memberList"
                                                            :key="item.id"
                                                            :label="item.name"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="recordSearchForm.begin_date"></el-date-picker>
                                                ~
                                                <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="recordSearchForm.end_date"></el-date-picker>
                                            </el-form-item>
                                            <el-form-item size="mini">
                                                <el-input placeholder="备注关键字" v-model="recordSearchForm.memo"></el-input>
                                            </el-form-item>
                                            <el-button type="primary" size="mini" @click="getRecordList(0)">检索</el-button>
                                            <el-divider direction="vertical"></el-divider>
                                            <el-button type="primary" size="mini" @click="getRecordList(1)">全部</el-button>
                                        </el-form>
                                    </div>
                                    <!--账单列表-->
                                    <div class="recordTable">
                                        <template>
                                            <el-table :data="recordList" border stripe>
                                                <el-table-column type="index">
                                                </el-table-column>
                                                <el-table-column prop="tally_time" sortable width="120px" label="账单日期">
                                                    <template slot-scope="scope">
                                                        <i class="el-icon-time"></i>
                                                        <span>{{ scope.row.tally_time.substring(0,10) }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="category_name" label="分类"></el-table-column>
                                                <el-table-column prop="type_txt" label="类型"></el-table-column>
                                                <el-table-column prop="amount" sortable label="金额"></el-table-column>
                                                <el-table-column prop="account_name" label="账户"></el-table-column>
                                                <el-table-column prop="store_name" width="100px" label="客户/供应商"></el-table-column>
                                                <el-table-column prop="project_name" label="项目"></el-table-column>
                                                <el-table-column prop="member_name" label="员工"></el-table-column>
                                                <el-table-column prop="memo" label="备注"></el-table-column>
                                                <el-table-column prop="state_txt" label="状态"></el-table-column>
                                                <el-table-column prop="state_txt" label="审核">
                                                    <template slot-scope="scope">
                                                        <div v-if="scope.row.state==0 && currentTally.role!='accountant'" >
                                                             <span class="recordOptBtn primary" @click="auditRecord(scope.row,1)">
                                                            <i class="el-icon-check"></i>&nbsp;</span>
                                                            <span class="recordOptBtn primary" @click="auditRecord(scope.row,-1)">
                                                            <i class="el-icon-close"></i>&nbsp;
                                                        </span>
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column fixed="right" label="操作" >
                                                    <template slot-scope="scope">
                                                        <span class="recordOptBtn primary" @click="editRecord(scope.row)">
                                                            <i class="el-icon-edit"></i>&nbsp;
                                                        </span>
                                                        <span class="recordOptBtn danger" @click="delRecord(scope.$index,recordList)">
                                                            <i class="el-icon-delete-solid"></i>&nbsp;
                                                        </span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </template>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="report">
                    <span slot="label"><i class="el-icon-s-marketing"></i> 报表</span>
                    <div>
                        <el-tabs class="tallyStatTabs" value="stat-daily" @tab-click="handleStatTabClick">
                            <el-tab-pane name="stat-daily">
                                <span slot="label"><i class="el-icon-date"></i> 日常收支报表</span>
                                <!--搜索筛选框-->
                                <el-form :inline="true" v-model="statDailyForm" class="form-inline statDailyForm">
                                    <el-form-item size="mini">
                                        <el-select placeholder="全部分类" clearable filterable default-first-option v-model="statDailyForm.category_ids" filterable multiple @click.native="getCategoryList()">
                                            <el-option-group
                                                    v-for="cate in categoryList"
                                                    :key="cate.title"
                                                    :label="cate.title">
                                                <el-option
                                                        v-for="item in cate.children"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-option-group>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item size="mini">
                                        <el-select placeholder="全部账户" clearable filterable default-first-option v-model="statDailyForm.account_ids" multiple filterable @click.native="getAccountList()">
                                            <el-option
                                                    v-for="item in accountList"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item size="mini">
                                        <el-select placeholder="客户/供应商" clearable filterable default-first-option v-model="statDailyForm.store_ids" multiple filterable @click.native="getStoreListAll()">
                                            <el-option-group
                                                    v-for="cate in storeListAll"
                                                    :key="cate.title"
                                                    :label="cate.title">
                                                <el-option
                                                        v-for="item in cate.children"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-option-group>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item size="mini">
                                        <el-select  placeholder="项目" clearable filterable default-first-option v-model="statDailyForm.project_ids" multiple filterable @click.native="getProjectList()">
                                            <el-option
                                                    v-for="item in projectList"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item size="mini">
                                        <el-select  placeholder="员工" clearable filterable default-first-option v-model="statDailyForm.member_ids" multiple filterable @click.native="getMemberList()">
                                            <el-option
                                                    v-for="item in memberList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item size="mini">
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statDailyForm.begin_date"></el-date-picker>
                                        ~
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statDailyForm.end_date"></el-date-picker>
                                    </el-form-item>
                                    <el-button type="primary" size="mini" @click="setDailyGraph()">检索</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="primary" size="mini" @click="setDailyGraph(1)">全部</el-button>
                                </el-form>
                                <!--柱状堆积图-->
                                <div id="statDailyIn" class="statBox"></div>
                                <el-table class="statTable"
                                        :data="statDailyInData" show-summary border>
                                    <el-table-column
                                            prop="parent_name"
                                            label="一级分类">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="二级分类">
                                    </el-table-column>
                                    <el-table-column
                                            prop="amount"
                                            label="金额" sortable>
                                    </el-table-column>
                                </el-table>
                                <div id="statDailyOut" class="statBox"></div>
                                <el-table class="statTable"
                                          :data="statDailyOutData" show-summary border>
                                    <el-table-column
                                            prop="parent_name"
                                            label="一级分类">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="二级分类">
                                    </el-table-column>
                                    <el-table-column
                                            prop="amount"
                                            label="金额" sortable>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane name="stat-trend" v-if="false">
                                <span slot="label"><i class="el-icon-date"></i> 收支趋势图</span>
                                收支趋势图
                            </el-tab-pane>
                            <el-tab-pane name="stat-member">
                                <span slot="label"><i class="el-icon-date"></i> 成员收支表</span>
                                <!--搜索筛选框-->
                                <el-form :inline="true" v-model="statMemberForm" class="form-inline statMemberForm">
                                    <el-form-item size="mini">
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statMemberForm.begin_date"></el-date-picker>
                                        ~
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statMemberForm.end_date"></el-date-picker>
                                    </el-form-item>
                                    <el-button type="primary" size="mini" @click="setMemberGraph()">检索</el-button>
                                </el-form>
                                <el-row>
                                    <el-col :span="12" style="padding:10px 20px;">
                                        <!--收入柱状图-->
                                        <div id="statMemberIn" class="statBox"></div>
                                        <el-table class="statTable"
                                                  :data="statMemberInData" show-summary border>
                                            <el-table-column
                                                    prop="name"
                                                    label="成员">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="total"
                                                    label="金额" sortable>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                    <el-col :span="12" style="padding:10px 20px;">
                                        <!--收入柱状图-->
                                        <div id="statMemberOut" class="statBox"></div>
                                        <el-table class="statTable"
                                                  :data="statMemberOutData" show-summary border>
                                            <el-table-column
                                                    prop="name"
                                                    label="成员">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="total"
                                                    label="金额" sortable>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane name="stat-store">
                                <span slot="label"><i class="el-icon-date"></i> 商家支出表</span>
                                <!--搜索筛选框-->
                                <el-form :inline="true" v-model="statStoreForm" class="form-inline statStoreForm">
                                    <el-form-item size="mini">
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statStoreForm.begin_date"></el-date-picker>
                                        ~
                                        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statStoreForm.end_date"></el-date-picker>
                                    </el-form-item>
                                    <el-button type="primary" size="mini" @click="setStoreGraph()">检索</el-button>
                                </el-form>
                                <el-row>
                                    <el-col :span="12" style="padding:10px 20px;">
                                        <div id="statStoreOut" class="statBox"></div>
                                    </el-col>
                                    <el-col :span="12" style="padding:10px 20px;">
                                        <!--收入柱状图-->
                                        <div id="statStoreOut" class="statBox"></div>
                                        <el-table class="statTable"
                                                  :data="statStoreOutData" show-summary border>
                                            <el-table-column
                                                    prop="name"
                                                    label="商家">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="total"
                                                    label="金额" sortable>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-tab-pane>

				<el-tab-pane name="category">
                    <span slot="label"><i class="el-icon-s-operation"></i> 分类</span>
                    <!--加载子组件-->
                    <tally-category-component :category-list-for-type="categoryListForType" v-on:show_tips="showTips">
                    </tally-category-component>
                </el-tab-pane>

                <el-tab-pane name="account">
                    <span slot="label"><i class="el-icon-s-finance"></i> 账户</span>
                    <!--加载子组件-->
                    <tally-account-component :account-list="accountList"
                                             :account-tags="accountTags"
                                             v-on:show_tips="showTips"></tally-account-component>
                </el-tab-pane>

                <el-tab-pane name="store">
                    <span slot="label"><i class="el-icon-s-shop"></i> 客户/供应商</span>
                    <!--加载子组件-->
                    <tally-store-component :store-list-for-type="storeListForType" v-on:show_tips="showTips">
                    </tally-store-component>
                </el-tab-pane>

                <el-tab-pane name="project">
                    <span slot="label"><i class="el-icon-s-claim"></i> 项目</span>
                    <!--加载子组件-->
                    <tally-project-component :project-list="projectList" v-on:show_tips="showTips">
                    </tally-project-component>
                </el-tab-pane>
                <el-tab-pane name="member">
                    <span slot="label"><i class="el-icon-s-custom"></i> 员工</span>
                    <!--加载子组件-->
                    <tally-member-component :member-list="memberList" v-on:show_tips="showTips">
                    </tally-member-component>
                </el-tab-pane>
                <el-tab-pane name="setting">
                    <span slot="label"><i class="el-icon-setting"></i> 设置</span>
                    <!--加载子组件-->
                    <tally-setting-component :tally-log="tallyLog" :current-tally="currentTally"
                                             :tally-users="tallyUsers" v-on:show_tips="showTips">
                    </tally-setting-component>

                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>

    <!--账单编辑表单框-->
    <el-dialog title="账单修改" :visible.sync="editDialogRecord">
        <el-row>
            <el-form :inline="true" :model="tallyRecordEditForm" :rules="tallyFormRules" class="form-inline recordForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="金额" prop="amount">
                            <el-input placeholder="0.00" v-model="tallyRecordEditForm.amount"> <template slot="append">元</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item v-if="tallyRecordEditForm.type == 10 || tallyRecordEditForm.type == 20" label="分类">
                            <el-select  placeholder="分类" clearable filterable default-first-option v-model="tallyRecordEditForm.category_id" filterable>
                                <el-option-group
                                        v-for="cate in categoryListForEdit"
                                        :key="cate.title"
                                        :label="cate.title">
                                    <el-option
                                            v-for="item in cate.children"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item prop="account_id">
                            <span slot="label">{{ tallyRecordEditForm.type == 30 ? "转出":"账户" }}</span>
                            <el-select placeholder="账户" clearable filterable default-first-option v-model="tallyRecordEditForm.account_id">
                                <el-option
                                        v-for="item in accountList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="account_dst_id" v-if="tallyRecordEditForm.type == 30">
                            <span slot="label">转入</span>
                            <el-select placeholder="转入账户" clearable filterable default-first-option v-model="tallyRecordEditForm.account_dst_id">
                                <el-option
                                        v-for="item in accountList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item v-if="tallyRecordEditForm.type == 10" label="客户">
                            <el-select  placeholder="客户" clearable filterable default-first-option v-model="tallyRecordEditForm.store_id">
                                <el-option
                                        v-for="item in storeList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item v-if="tallyRecordEditForm == 20" label="供应商">
                            <el-select  placeholder="供应商" clearable filterable default-first-option v-model="tallyRecordEditForm.store_id">
                                <el-option
                                        v-for="item in storeList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="员工">
                            <el-select  placeholder="员工" clearable filterable default-first-option v-model="tallyRecordEditForm.member_id" no-data-text="其他">
                                <el-option
                                        v-for="item in memberList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="项目">
                            <el-select  placeholder="项目" clearable filterable default-first-option v-model="tallyRecordEditForm.project_id">
                                <el-option
                                        v-for="item in projectList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="时间">
                            <el-date-picker class="datePicker" v-model="tallyRecordEditForm.dateR" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input placeholder="备注" class="tallyMemoInput" v-model="tallyRecordEditForm.memo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <p style="margin-bottom: 10px;">
                        <el-link :underline="false" type="info"  @click="showImgUploadBox = !showImgUploadBox"><i class="el-icon-paperclip"></i>&nbsp;添加图片或附件 <i class="el-icon-arrow-down"></i></el-link>
                        <el-upload v-if="showImgUploadBox" accept="image/jpeg,image/gif,image/png,application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                   action="/api/upload/file" :headers="upHeaders"
                                   :before-upload="recordFormFileBeforeUpload"
                                   :file-list="recordFormEditFileList"
                                   :on-success="recordFormEditFileUploadSuccess"
                                   :on-remove="recordFormFileRemove"
                                   list-type="picture-card" :limit="3">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </p>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <p style="text-align:center;margin-bottom: 20px;">
                            <el-button type="success" @click="handleRecordEditForm"><i class="el-icon-upload"></i> 保 存</el-button>
                            <el-button @click="editDialogRecord = false">取 消</el-button>
                        </p>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </el-dialog>

    <!--账本新增 编辑表单框-->
    <el-dialog :visible.sync="tallyDialog">
        <h3 slot="title">{{ tallyDialogTitle }}</h3>
        <el-form ref="form" :rules="tallyRules" :model="tallyForm" label-width="80px">
            <el-form-item v-if="tallyForm.id" class="hidden">
                <el-input v-model="tallyForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="账本名称" prop="title" required>
                <el-input autocomplete="off" v-model="tallyForm.title" required></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input autocomplete="off" v-model="tallyForm.company_title"></el-input>
            </el-form-item>
            <el-form-item label="所在地">
                <el-cascader
                        size="large"
                        :options="areaOptions"
                        v-model="areaSelectedOptions"
                        @change="handleAreaChange"
                        >
                </el-cascader>
            </el-form-item>
            <el-form-item label="财务人员">
                <el-radio-group v-model="tallyForm.financial_type">
                    <el-radio :label="1">仅有会计</el-radio>
                    <el-radio :label="2">会计兼出纳</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属行业">
                <el-cascader
                        v-model="tallyForm.industry"
                        :options="industryOptions" style="width:260px;">
                </el-cascader>
            </el-form-item>
            <el-form-item label="账本备注">
                <el-input autocomplete="off" v-model="tallyForm.memo"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="tallyDialog = false">取 消 </el-button>
            <el-button type="primary" @click="handleTallyForm">确 定</el-button>
        </div>
    </el-dialog>




</div>

<div style="height: 100px;"></div>
<?php echo $this->render('../public/footer.php')?>

<script>
    let CurrDateR = '<?php echo date('Y-m-d');?>';
    let CurrTimeR = '<?php echo date('H:i:s');?>';
    let monthBeginDate = '<?php echo $monthBeginDate;?>';
    let monthEndDate   = '<?php echo $monthEndDate;?>';
    let currentTallyId = '<?php echo $tallyId?>';//当前选中状态的账本
    let loginToken  =  localStorage.getItem('loginToken');
    new Vue({
        el:'#mainContent',
        data() {
            return {
                showImgUploadBox:true,
                dialogImageUrl: '',
                dialogVisible: false,
                editDialogRecord: false,
                tallyDialog:false,
                tallyAccountDialog:false,
                currentTally:{},
                tallyForm:{},
                activeTab:'record',
                tallyDialogTitle:'添加账本',
                tallyAddType:10,
                categoryType:1,
                storeType:1,
                statType:'stat-daily',
                tallyRecordForm:{
                    dateR:CurrDateR,
                    timeR:CurrTimeR
                },
                tallyRecordEditForm:{},
                tallyList:[],
                accountList:[],
                categoryList:[],
                categoryListIn:[],
                categoryListOut:[],
                categoryListForType:[],
                categoryListForEdit:[],
                storeListForType:[],
                storeList:[],
                projectList:[],
                memberList:[],
                storeListAll:[],
                tallyUsers:[],
                tallyLog:[],
                accountTags:[],
                recordListRecent:[],
                industryOptions:[],
                statDailyInData:[],
                statDailyOutData:[],
                statMemberInData:[],
                statMemberOutData:[],
                statStoreInData:[],
                statStoreOutData:[],
                areaOptions:provinceAndCityData,
                areaSelectedOptions: [],
                tallyTypes:[{id:10,title:'收入'},{id:20,title:'支出'},{id:30,title:'转账'}],
                recordSearchForm:{
                    begin_date : monthBeginDate,
                    end_date : monthEndDate,
                },
                statDailyForm:{
                    begin_date : monthBeginDate,
                    end_date : monthEndDate,
                },
                statMemberForm:{
                    begin_date : monthBeginDate,
                    end_date : monthEndDate,
                },
                statStoreForm:{
                    begin_date : monthBeginDate,
                    end_date : monthEndDate,
                },
                recordPeriod: monthBeginDate + ' ～ '+monthEndDate,
                recordCountDebt:{
                    in : 0.00 ,
                    out : 0.00 ,
                    debt : 0.00 ,
                },
                recordList:[],
                upHeaders:{
                    token:loginToken
                },
                recordFormFileList: [],
                recordFormEditFileList: [],
                tallyRules: {
                    title: [
                        { required: true, message: '请输入账本名称', trigger: 'blur' }
                    ],
                },
                tallyFormRules: {
                    amount: [
                        { required: true, message: '请输入金额', trigger: 'blur' }
                    ],
                },
            }
        },
        computed: {},
        mounted:function() {
            if(!logined){
                location.href='/login'
            }
            this._initTally()
        },
        methods: {
            _initTally(){
                // 获取账本列表
                this.getTallyList()
            },
            _initOther(){
                // 初始化类别等数据
                // this.getAccountList()
                // this.getStoreList()
                // this.getProjectList()
                // this.getMemberList()
                // this.getTallyUsersList()
                // this.getRecordList(0)
                // this.getCategoryListForType()
                // 获取最近10条记账记录
                this.getRecordListRecent()
                this.getIndustryOptions()
            },
            convertTextToCode(provinceText, cityText, regionText) {
                let code = [];
                if (provinceText && TextToCode[provinceText]) {
                    const province = TextToCode[provinceText];
                    code[0] = province.code;
                    if (cityText && province[cityText]) {
                        const city = province[cityText];
                        code[1] = city.code;
                        if (regionText && city[regionText]) {
                            code[2] = city[regionText].code;
                        }
                    }
                }
                return code;
            },
            showTips(type,msg){
                this.$message({
                    type: type,
                    message: msg
                });
            },
            setTallyAddType(type){
                // 类别改变事件
                if(type != this.tallyAddType) {
                    this.tallyAddType = type
                    this.tallyTypeChanged = true
                    this.tallyRecordForm.category_id = null
                    // 触发获取客户/供应商
                    this.getStoreList(type)
                }
            },
            setStatType(type){
                // 账单类别切换
            },
            getIndustryOptions(){
                let that = this
                axios.get('/api/industry/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.industryOptions = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getTallyList(){
                let that = this
                axios.get('/api/tally/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.tallyList = res.data.data
                        if(that.tallyList.length > 0 ) {
                            if(currentTallyId == 0){
                                // 设置第一个为默认账本
                                that.currentTally = that.tallyList[0]
                                currentTallyId  = that.tallyList[0].id
                            }else{
                                that.tallyList.forEach((item,index)=>{
                                    if(item.id == currentTallyId) {
                                        that.currentTally = that.tallyList[index]
                                    }
                                });
                            }
                            // 初始化账本
                            that._initOther();
                        }else{
                            that.showTips('warnning','还没有账本~ 先创建一个吧~')
                        }
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getCategoryList(forType){
                let that = this
                let cateType = 1 //分类类型
                if(forType == 'forRecord'){
                    if( this.recordSearchForm.type == 10){
                        cateType = 1
                    }else{
                        cateType = 2
                    }
                }else {
                    if(this.tallyAddType == 20){
                        cateType = 2
                    }
                }
                if(cateType == 1 && that.categoryListIn.length > 0) {
                    that.categoryList = that.categoryListIn
                    return
                }
                if(cateType == 2 && that.categoryListOut.length > 0) {
                    that.categoryList = that.categoryListOut
                    return
                }
                this.getCategoryListBase(currentTallyId,cateType)
                    .then( (res) => {
                        that.categoryList = res.data.data
                        if(cateType == 1) that.categoryListIn = res.data.data
                        if(cateType == 2) that.categoryListOut = res.data.data
                    })
            },
            getCategoryListBase(tallyId,cateType){
                // 获取分类数据的基本方法
                let that = this
                return new Promise(function(resolve, reject){
                    axios.get('/api/category/lists?tally_id='+tallyId+'&type='+cateType,{
                        method: 'get',
                        headers: {'token': loginToken},
                    }).then(function(res) {
                        if(res.data.status == 'success'){
                            resolve(res)
                        }else{
                            that.showTips('error','解析数据失败:'+res.data.error_message)
                            reject(res)
                        }
                    })
                })

            },
            getCategoryListForType(){
                let that = this
                let cateType = this.categoryType
                this.getCategoryListBase(currentTallyId,cateType)
                    .then( (res) => {
                        that.categoryListForType = res.data.data
                        that.categoryTypeChanged = false
                    })
            },
            getAccountTags(){
                let that = this
                axios.get('/api/account/tags?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.accountTags = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getAccountList(){
                let that = this
                if(that.accountList.length > 0) return
                axios.get('/api/account/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.accountList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getStoreListAll(){
                let that = this
                if(that.storeListAll.length > 0 ) return
                axios.get('/api/store/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.storeListAll = that.branchStoreData(res.data.data)
                        console.log(that.storeListAll)
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            branchStoreData(dataList){
                let st1 = []
                let st2 = []
                dataList.forEach( function (item,index){
                    if(item.type==1){
                        st1.push(item)
                    }else{
                        st2.push(item)
                    }
                });
                return [
                    {"title":"客户","children":st1},
                    {"title":"供应商","children":st2}
                ];
            },
            getStoreList(type,flag=1){
                let that = this
                axios.get('/api/store/lists?type='+type+'&tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        if(flag == 2) {
                            that.storeListForType = res.data.data
                        }else{
                            that.storeList = res.data.data
                        }
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getProjectList(){
                let that = this
                if(that.projectList.length > 0 ) return
                axios.get('/api/project/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.projectList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getMemberList(){
                let that = this
                if(that.memberList.length > 0 ) return
                axios.get('/api/member/lists?tally_id='+currentTallyId,{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.memberList = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getRecordList(an){
                let that = this
                if(an == 1) {
                    that.recordSearchForm = {
                        begin_date : monthBeginDate,
                        end_date : monthEndDate,
                    }
                } // 获取全部的时候去除筛选条件
                axios.get('/api/tally-record/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.recordSearchForm
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.recordList = res.data.data
                        that.recordPeriod = that.recordSearchForm.begin_date + ' ～ '+ that.recordSearchForm.end_date
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
                // 获取债务统计
                axios.get('/api/tally-record/count-debt',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.recordSearchForm
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.recordCountDebt = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getRecordListRecent(){
                let that = this
                axios.get('/api/tally-record/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {'limit':10,'offset':0,'tally_id':currentTallyId}
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.recordListRecent = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getTallyUsersList(){
                let that = this
                axios.get('/api/tally/users',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {id:currentTallyId}
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.tallyUsers = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getTallyLogList(page){
                let that = this
                axios.get('/api/tally/log',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        tally_id:currentTallyId,
                        page:page || 1
                    }
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.tallyLog = res.data.data
                        that.logPageSize = res.data.extra.pageSize
                        that.logTotalCount = res.data.extra.totalCount
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            tallyAddDialog(){
                this.tallyForm = {} //添加表单置空
                this.tallyDialogTitle = '新增账本'
                this.tallyDialog = true;
            },
            editRecord(row){
                let that = this
                if(row.type == 10 || row.type == 20) {
                    // 加载分类
                    this.getCategoryListBase(row.tally_id,row.type/10)
                        .then((res)=> {
                            that.categoryListForEdit = res.data.data
                            console.log(that.categoryListForEdit);
                            console.log(777);
                        })
                }
                // 时间设置
                if(row.tally_time != '' ){
                    let timeArr = row.tally_time.split(' ')
                    row.dateR = timeArr[0]
                    row.timeR = timeArr[1]
                }
                // 如果是转账 获取第二账户
                // 加载员工、商家，项目数据
                this.getMemberList()
                this.getStoreList()
                this.getProjectList()
                this.getAccountList()
                this.editDialogRecord = true
                row.category_id = String(row.category_id )
                row.account_id = String(row.account_id )
                if(row.member_id  == 0) row.member_id = ''
                if(row.store_id  == 0) row.store_id = ''
                if(row.account_dst_id  == 0) row.account_dst_id = ''
                if(row.project_id  == 0) row.project_id = ''
                row.member_id = String(row.member_id )
                row.store_id = String(row.store_id )
                row.account_dst_id = String(row.account_dst_id )
                row.project_id = String(row.project_id )
                this.tallyRecordEditForm = row

            },
            setStatGraph(){
                // 根据不同图表类型 获取统计数据
                if(this.statType == 'stat-daily') {
                    this.setDailyGraph()
                }else if(this.statType == 'stat-member') {
                    this.setMemberGraph()
                }else if(this.statType == 'stat-store') {
                    this.setStoreGraph()
                }
            },
            setDailyGraph(isAll=0){
                let that = this
                that.statDailyInData=[]
                that.statDailyOutData=[]
                if(isAll == 1){
                    this.statDailyForm = {}
                }
                axios.post('/api/stat/daily?tally_id='+currentTallyId,this.statDailyForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        if(res.data.data.inlst.length < 1) {
                            that.showTips('warning','暂无收入记录')
                        }
                        if(res.data.data.outlist.length < 1) {
                            that.showTips('warning','暂无支出记录')
                        }
                        // 表格展示 收入
                        res.data.data.inlst.forEach(v=>{
                            if(v.c.length > 0) {
                                v.c.forEach(v2 => {
                                    v2.parent_name = v.name
                                    that.statDailyInData.push(v2)
                                })
                            }
                        });
                        // 表格展示 支出
                        res.data.data.outlist.forEach(v=>{
                            if(v.c.length > 0) {
                                v.c.forEach(v2 => {
                                    v2.parent_name = v.name
                                    that.statDailyOutData.push(v2)
                                })
                            }
                        });
                        // 渲染统计图表
                        genDailyGraphFromData(res.data.data)
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            setMemberGraph(isAll){
                let that = this
                that.statMemberInData=[]
                that.statMemberOutData=[]
                if(isAll == 1){
                    this.statMemberForm = {}
                }
                axios.post('/api/stat/member?tally_id='+currentTallyId,this.statMemberForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        if(res.data.data.inlst.length < 1) {
                            that.showTips('warning','暂无收入记录')
                        }
                        if(res.data.data.outlist.length < 1) {
                            that.showTips('warning','暂无支出记录')
                        }
                        // 表格展示 收入 支出
                        that.statMemberInData = res.data.data.inlst
                        that.statMemberOutData = res.data.data.outlist
                        // 渲染统计图表
                        genMemberGraphFromData(res.data.data)
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            setStoreGraph(isAll){
                let that = this
                that.statStoreInData=[]
                that.statStoreOutData=[]
                if(isAll == 1){
                    this.statStoreForm = {}
                }
                axios.post('/api/stat/member?tally_id='+currentTallyId,this.statStoreForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        if(res.data.data.outlist.length < 1) {
                            that.showTips('warning','暂无支出记录')
                        }
                        // 表格展示 收入 支出
                        that.statStoreOutData = res.data.data.outlist
                        // 渲染统计图表
                        genStoreGraphFromData(res.data.data)
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            handleAreaChange(value){
                console.log(this.areaSelectedOptions)
                // 省
                console.log(CodeToText[value[0]])
                // 市
                console.log(CodeToText[value[1]])
                // 区域转地址码convertTextToCode(CodeToText[selectedOptions3[0]]
                console.log(value)
            },
            handleTallyForm(){
                // 处理新增或者添加操作
                let that = this
                let postUrl;
                if(that.tallyForm.id) {
                    postUrl = '/api/tally/edit'
                }else{
                    postUrl = '/api/tally/add'
                }
                that.tallyForm.province = CodeToText[this.areaSelectedOptions[0]] ; //转省
                that.tallyForm.city = CodeToText[this.areaSelectedOptions[1]] ;//转市
                axios.post(postUrl,that.tallyForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                        that.getTallyList()
                        that.currentTally = that.tallyForm
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyDialog = false;
                })
            },
            handleRecordForm(){
                // 处理记一笔事件
                let that = this
                let postUrl = '/api/tally-record/add'
                let postData = that.tallyRecordForm
                let attachment = []
                that.recordFormFileList.forEach(v=>{
                    attachment.push(v.url)
                });
                postData.tally_id = currentTallyId // 当前账本ID
                postData.type = this.tallyAddType // 收支类型
                postData.tally_time = postData.dateR + ' '+ postData.timeR //拼账单时间
                postData.attachment = attachment.join(',')
                axios.post(postUrl,postData,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                        // 追加数据到tallyRecordList
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyDialog = false;
                })
            },
            handleRecordEditForm(){
                // 账单重新编辑
                let that = this
                let postUrl = '/api/tally-record/edit'
                let postData = that.tallyRecordEditForm
                let attachment = []
                that.recordFormEditFileList.forEach(v=>{
                    attachment.push(v.url)
                });
                postData.tally_id = currentTallyId // 当前账本ID
                postData.tally_time = postData.dateR + ' '+ postData.timeR //拼账单时间
                postData.attachment = attachment.join(',')
                axios.post(postUrl,postData,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                        // 追加数据到tallyRecordList
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.editDialogRecord = false;
                })
            },
            handleTallyAccountForm(){
                // 处理账户新增&编辑操作
                let that = this
                let postUrl;
                if(that.tallyAccountForm.id) {
                    postUrl = '/api/account/edit'
                }else{
                    postUrl = '/api/account/add'
                }
                that.tallyAccountForm.tally_id = currentTallyId
                axios.post(postUrl,that.tallyAccountForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                        // 追加数据到account
                        that.tallyAccountForm.id = res.data.data.id
                        if(postUrl == '/api/account/add'){
                            that.accountList.push(that.tallyAccountForm)
                        }
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyAccountDialog = false;
                })
            },
            auditRecord(row,state){
                // 账单审核
                let that = this
                let advice = state == 1 ? '同意' : '拒绝'
                let state_txt = state == 1 ? '正常' : '已忽略'
                this.$confirm('确定要审核该行记录：'+ advice, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action == 'confirm') {
                            let postUrl = '/api/tally-record/audit'
                            axios.post(postUrl,{id:row.id,state:state},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status == 'success'){
                                    row.state = state
                                    row.state_txt = state_txt
                                    that.showTips('success','操作成功~')
                                }else{
                                    that.showTips('error','解析数据失败:'+res.data.error_message)
                                }
                            })
                        }
                    }
                });
            },
            delRecord(index,rows){
                // 删除账单记录
                let that = this
                this.$confirm('确定要删除该行记录', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action == 'confirm') {
                            // 执行删除操作
                            let postUrl = '/api/tally-record/del'
                            axios.post(postUrl,{id:rows[index].id},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status == 'success'){
                                    that.showTips('success','操作成功~')
                                    rows.splice(index, 1);
                                }else{
                                    that.showTips('error','解析数据失败:'+res.data.error_message)
                                }
                            })
                        }
                    }
                });
            },
            recordFormFileBeforeUpload(file){
                console.log(file)
            },
            recordFormFileUploadSuccess(response, file, fileList){
                if(response.status == 'success') {
                    file.url = response.data.url
                    // let fileData = response.data.url.split('/')
                    // let fileName = fileData[fileData.length - 1]
                    this.recordFormFileList.push(file)
                }else{
                    this.recordFormFileList.pop()
                    this.showTips('error','上传失败:'+response.error_message)
                }
            },
            recordFormEditFileUploadSuccess(response, file, fileList){
                if(response.status == 'success') {
                    file.url = response.data.url
                    // let fileData = response.data.url.split('/')
                    // let fileName = fileData[fileData.length - 1]
                    this.recordFormEditFileList.push(file)
                }else{
                    this.recordFormEditFileList.pop()
                    this.showTips('error','上传失败:'+response.error_message)
                }
            },
            recordFormFileRemove(file, fileList){
                this.recordFormFileList = fileList
            },
            handleStatTabClick(tab){
                if(tab.name != this.statType){
                    this.statType = tab.name;
                    // 重新渲染
                    this.setStatGraph()
                }
            },
            handleTabClick(tab,event){
                // 不同tab加载不同数据
                switch (tab.name) {
                    case 'tally':
                        break;
					case 'lists':
                        this.getRecordList()
                        break;
					case 'report':
					    this.setStatGraph()
                        break;
                    case 'category':
                        this.getCategoryListForType()
                        break;
                    case 'account':
                        this.getAccountList()
                        this.getAccountTags()
                        break;
                    case 'store':
                        this.getStoreList(1,2)
                        break;
                    case 'member':
                        this.getMemberList()
                        break;
                    case 'project':
                        this.getProjectList()
                        break;
                    case 'setting':
                        this.getTallyUsersList()
                        this.getTallyLogList()
                        break;
                }
                return true ;
            },
        }
    })
</script>
</body>
</html>
